<template>
  <div>
    <vol-box
      :lazy="true"
      v-model="purchaseApplicationModel"
      title="选择采购申请单"
      :height="400"
      :width="1200"
      :padding="5"
    >
      <div class="box">
        <!-- <purchaseApplication ref="purchaseApplication"></purchaseApplication> -->
        <div class="topBox">
          <div class="demo-input-suffix">
            <label for="inp">单据编码：</label>
            <el-input id="inp" placeholder="单据编码" v-model="form.voucher">
            </el-input>

            <el-button type="primary" text @click="voucherBtn">
              <i class="el-icon-search"></i>
              更多单据
            </el-button>
          </div>
          <div class="demo-input-suffix">
            <label for="select">审核状态：</label>
            <el-select id="select" v-model="form.state" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button class="qureyBtn" type="primary" @click="qureyBtnFn"
            >查询</el-button
          >
        </div>
        <div class="bottomBox">
          <p class="smallTitle">采收申请单</p>
          <el-table
            ref="table"
            :data="tableData"
            stripe
            style="width: 100%"
            :header-cell-style="{ background: `#f8f8f9`, color: `#616161` }"
            border
            height="465"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="Voucher_sub" label="单据编码" width="200">
            </el-table-column>
            <el-table-column prop="Goods_name" label="审核状态" width="180">
            </el-table-column>
            <el-table-column prop="Creator" label="创建人员" width="120">
            </el-table-column>
            <el-table-column prop="CreateDate" label="创建时间"> </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button
            type="primary"
            size="small"
            @click="purchaseApplicationOnSelect"
            >确认</el-button
          >
        </div>
      </template>
    </vol-box>
    <!-- 弹窗 -->
    <el-dialog title="选择采购申请单" v-model="dialogVisible" width="60%">
      <purchaseApplication ref="purchaseApplication"></purchaseApplication>
      <div class="footBox">
        <el-button type="primary" @click="confirmBtnFn" round>确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import purchaseApplication from "@/views/purchaseinfo/purchase_application/q_purchase_application.vue";
export default {
  components: {
    "vol-box": VolBox,
    purchaseApplication,
  },
  data() {
    return {
      purchaseApplicationModel: false,
      dialogVisible: false,
      options: [
        {
          value: "0",
          label: "待审核",
        },
        {
          value: "1",
          label: "审核中",
        },
      ],
      form: {
        voucher: "",
        state: "",
        value: "",
      },
      tableData: [],
    };
  },

  methods: {
    confirmBtnFn() {
      console.log("rowObj");
      let rowObj = this.$refs.purchaseApplication.$refs.grid.getSelectRows();
      console.log(rowObj);
      if (rowObj.length) {
        this.form.voucher = rowObj[0].Voucher_sub;
        this.form.value = rowObj[0].Purchase_application;
        this.dialogVisible = false;
      } else {
        this.$message.error("请选择采购申请单");
      }
    },
    voucherBtn() {
      this.dialogVisible = true;
    },
    qureyBtnFn() {
      let url = "api/q_purchase_application/getDetailPage";
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "Goods_sub",
        value: this.form.value,
        wheres: "[]",
      };
      this.http.post(url, param, "").then(({ rows }) => {
        try {
          if (rows.length) {
            this.tableData = rows;
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    detailPurchaseApplicationOpen() {
      let url ="api/q_purchase_application/getPageData"
         this.http.post(url, {}, "").then(({ rows }) => {
        try {
          console.log(rows)
          if (rows.length) {
            this.tableData = rows;
          }
        } catch (error) {
          console.error(error);
        }
      });
      this.purchaseApplicationModel = true;
    },
    purchaseApplicationOnSelect() {
      let selectionRows = this.$refs.table.getSelectionRows();
      selectionRows.forEach((o) => {
        o.Voucher_sub = this.form.voucher;
      });
      if (selectionRows.length) {
        this.$emit("parentCall", ($parent) => {
          let detailRowData = $parent.$refs.detail.rowData;
          let num = 0;
          detailRowData.forEach((item) => {
            selectionRows.forEach((o) => {
              o.Voucher_sub = this.form.voucher;
              if (
                o.Goods_sub == item.Goods_sub &&
                o.Voucher_sub == item.Voucher_sub
              )
                num++;
            });
          });

          if (!num) {
            let newRowObj = selectionRows.map((item) => {
              return {
                Voucher_sub: item.Voucher_sub,
                Goods_sub: item.Goods_sub,
                Goods_num: item.Goods_num,
                Goods_name: item.Goods_name,
                Goods_size: item.Goods_size,
              };
            });
            $parent.$refs.detail.rowData.unshift(...newRowObj);
            return (this.purchaseApplicationModel = false);
          } else {
            this.$message.error("此采购单已包含该商品");
          }
        });
      }
    },
    /*
       purchaseApplicationOnSelect() {
      let rowObj = this.$refs.purchaseApplication.$refs.grid.getSelectRows();
      console.log("rowObj", rowObj);
      if (rowObj.length) {
        this.$emit("parentCall", ($parent) => {
          let detailRowData = $parent.$refs.detail.rowData;
          let num = 0;
          detailRowData.forEach((item) => {
            rowObj.forEach((o) => {
              if (o.Voucher_sub == item.Voucher_sub) num++;
            });
          });

          if (!num) {
            let newRowObj = rowObj.map((item) => {
              return {
                Voucher_sub: item.Voucher_sub,
              };
            });
            this.$emit("parentCall", ($parent) => {
              $parent.$refs.detail.rowData.unshift(...newRowObj);
            });
            return (this.purchaseApplicationModel = false);
          } else {
            this.$message.error("此采购单已包含该申请单");
          }
        });
      } else {
        return this.$message.error("请选择采购申请单");
      }
    },
     */
  },
};
</script>

<style scoped>
.box {
  height: 600px;
  overflow: auto;
}
.topBox {
  padding: 20px 0;
  border-bottom: 1px solid #eaeaea;
}
.el-icon-search {
  display: inline-block;
}
.topBox,
.demo-input-suffix {
  display: flex;
  line-height: 31px;
}
.demo-input-suffix {
  width: 40%;
  margin-left: 10px;
}
label {
  width: 160px;
  text-align: right;
}
.el-select {
  width: 65%;
}
.qureyBtn {
  margin-left: 30px;
  padding: 0 30px;
}
.bottomBox {
  padding: 5px;
  height: 525px;
  overflow: auto;
}

.footBox {
  float: right;
  padding: 10px 20px;
}
.confirmBtn {
  padding: 0 20px;
  pointer-events: none;
}
.smallTitle {
  color: #5d5c5c;
  font-weight: 600;
}
</style>